<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{ fontSize: '16px' }">
    Loading...
  </afl-loading>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100" v-else>
    <div class="common-layout">
      <el-container class="container ">
        <!-- 头部查询条件start -->
        <el-header class="header card">
          <el-row :gutter="20">
            <el-col :span="20">
              <!-- 查询条件 -->
              <el-row>
                <el-col :span="5">
                  <div class="header-title">
                    <label class="header-title-label">{{ $t('wms.letterOfAdvice') }}：</label>
                    <el-input class="header-title-input" v-model="data.letterOfAdvice"
                              :placeholder="$t('wms.pleaseEnter')" clearable />
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="header-title">
                    <label class="header-title-label">{{ $t('wms.delivered') }}：</label>
                    <el-select v-model="data.delivered" class="header-title-input" :placeholder="$t('wms.pleaseSelect')"
                               clearable>
                      <el-option v-for="item in data.options" :key="item.value" :label="item.label"
                                 :value="item.value" />
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="header-title">
                    <label class="header-title-label">{{ $t('wms.salesNo') }}：</label>
                    <el-input class="header-title-input" v-model="data.salesOrder" :placeholder="$t('wms.pleaseEnter')"
                              clearable />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="header-title">
                    <label class="header-title-label">{{ $t('wms.deliveryDate') }}：</label>
                    <el-date-picker class="header-title-input" v-model="data.date" type="daterange"
                                    :range-separator="$t('wms.to')"
                                    :start-placeholder="$t('wms.startTime')" :end-placeholder="$t('wms.endTime')"
                                    :size="size" format='YYYY-MM-DD' unlink-panels="true" />
                  </div>
                </el-col>
              </el-row>
              <!-- 数据汇总 -->
              <el-row>
                <el-col :span="12">
                  <el-descriptions class="margin-top" title="" :column="4" border>
                    <el-descriptions-item align="center" class-name="number-box">
                      <template v-slot:label>
                        {{ $t('wms.totalNumber') }}
                      </template>
                      <span
                          style="font-size: 22px;font-weight: bold;color:#E6A23C">{{ data.collect.unshippedQty || 0 }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item align="center" class-name="number-box">
                      <template v-slot:label>
                        {{ $t('wms.alreadyTotal') }}
                      </template>
                      <span
                          style="font-size: 22px;font-weight: bold;color:#409EFF">{{ data.collect.shippedQty || 0 }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item align="center" class-name="number-box">
                      <template v-slot:label>
                        {{ $t('wms.shipments') }}
                      </template>
                      <span
                          style="font-size: 22px;font-weight: bold;color:#659f2c">{{ data.collect.sumQty || 0 }}</span>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
              <el-row>
                <!--<el-col :span="5">-->
                <!--  <div class="header-title">-->
                <!--    <label class="header-title-label title">{{ $t('wms.totalNumber') }}：</label>-->
                <!--    <span style="font-size: 22px;font-weight: bold;color:#E6A23C">{{data.collect.unshippedQty || 0}}</span>-->
                <!--  </div>-->
                <!--</el-col>-->
                <!--<el-col :span="5">-->
                <!--  <div class="header-title">-->
                <!--    <label class="header-title-label title">{{ $t('wms.alreadyTotal') }}：</label>-->
                <!--    -->
                <!--  </div>-->
                <!--</el-col>-->
                <!--<el-col :span="5">-->
                <!--  <div class="header-title">-->
                <!--    <label class="header-title-label title">{{ $t('wms.shipments') }}：</label>-->
                <!--    <span style="font-size: 22px;font-weight: bold;color:#659f2c">{{data.collect.sumQty || 0}}</span>-->
                <!--  </div>-->
                <!--</el-col>-->
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row class="mb-4">
                <el-button type="primary" class="search-button" :icon="Search" @click="search">
                  <el-icon>
                    <search />
                  </el-icon>
                  {{ $t('wms.search') }}
                </el-button>
                <el-button type="info" class="search-button" :icon="Rest" @click="rest">{{ $t('wms.rest') }}</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-header>
        <!-- 头部查询条件end -->

        <!-- 表格部分start -->
        <el-main class="main-tab card">
          <div class="main-headline">
            <div class="icon">
              <el-icon>
                <platform />
              </el-icon>
            </div>
            {{ $t('wms.goodsInfo') }}
          </div>
          <!-- 主表 -->
          <el-header class="primary-table">
            <el-table border :data="data.tableData" style="width:100%;height: 90%;" :highlight-current-row="true"
                      :fit="true" stripe table-layout="fixed" header-align="center"
                      :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                      :cell-style="{textAlign: 'center'}"
                      @row-click="(row, column, event) => rowClick(row, column, event) "
                      :current-page="data.currentPage">
              <el-table-column :label="$t('mes.orderInformation')" align="center">
                <el-table-column prop="id" label="id" v-if="false" />
                <el-table-column prop="dnCode" :label="$t('wms.letterOfAdvice')" align="center" />
                <el-table-column prop="salesOrders" :label="$t('wms.salesNo')" align="center" />
                <el-table-column prop="dnDate" :label="$t('wms.dateOfDocument')" align="center" />
                <el-table-column prop="customerName" :label="$t('wms.customerName')" align="center" />
                <el-table-column prop="creationTime" :label="$t('wms.creationTime')" align="center" />
                <el-table-column prop="deliveryDate" :label="$t('wms.earliestAvailableDate')" align="center" />
                <el-table-column prop="isFs" :label="$t('wms.whetherSmashing')" align="center" :formatter="sfktFormate">
                  <template #default="scope">
                    <div class="name-wrapper">
                      <el-tag effect="dark" style="width:100px" :type="scope.row.isFs === 1 ? 'success' : 'danger'">
                        {{ scope.row.isFs === 1 ? '是' : '否' }}
                      </el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="isComplate" :label="$t('wms.completed')" align="center">
                  <template #default="scope">
                    <div class="name-wrapper">
                      <el-tag effect="dark" style="width:100px"
                              :type="scope.row.isComplate === '已整单发货' ? 'success' : 'danger'">
                        {{ scope.row.isComplate }}
                      </el-tag>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="demo-pagination-block">
              <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[20, 30, 50]"
                             :small="small" :disabled="disabled" :background="background"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="data.total" @size-change="handleSizeChange"
                             @current-change="handleCurrentChange" />
            </div>
          </el-header>
          <!-- 子表 -->
          <el-main class="sublist-table">
            <el-table border :data="data.sublist" style="width:100%;height: 100%;" :highlight-current-row="true"
                      :fit="true" stripe table-layout="fixed" header-align="center">
              <el-table-column :label="$t('wms.orderLineInfor')" align="center">
                <el-table-column prop="dnCode" :label="$t('wms.shippingOrder')" align="center" width="200" />
                <el-table-column prop="dnLine" :label="$t('wms.lineNumber')" align="center" width="100" />
                <el-table-column prop="materialCode" :label="$t('wms.materialCode')" align="center" width="120">
                  <template #default="scope">
                    <el-popover trigger="hover" placement="top" width="200">
                      <el-descriptions class="margin-top" :column="1" size="small" border>
                        <el-descriptions-item>
                          <template #label>
                            <i class="el-icon-user"></i>
                            {{ $t('wms.materialSpce') }}
                          </template>
                          {{ scope.row.spec }}
                        </el-descriptions-item>
                      </el-descriptions>
                      <template v-slot:reference>
                        <div class="name-wrapper">
                          <el-tag size="large" effect="plain">{{ scope.row.materialCode }}
                          </el-tag>
                        </div>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column prop="materialName" :label="$t('wms.materialName')" align="center" width="180" />
                <el-table-column prop="spec" :label="$t('wms.materialSpce')" align="center" />
                <el-table-column prop="pcsperBox" :label="$t('wms.eachPiece')" align="center" width="120" />
                <el-table-column prop="boxPerPallet" :label="$t('wms.holderBox')" align="center" width="120" />
                <el-table-column prop="trayQty" :label="$t('wms.totalTory')" align="center" width="120" />
                <el-table-column prop="saleQty" :label="$t('wms.salesQuantity')" align="center" width="120" />
                <el-table-column prop="saleUnit" :label="$t('wms.marketingUnit')" align="center" width="120" />
                <el-table-column prop="scanQty" :label="$t('wms.quantityShipped')" align="center" width="160">
                  <template #default="scope">
                    <el-tag effect="dark" type="">
                      {{ scope.row.scanQty }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="isComplate" :label="$t('wms.whetherComplete')" align="center" width="120">
                  <template #default="scope">
                    <div class="name-wrapper">
                      <el-tag effect="dark" style="width:100px"
                              :type="scope.row.isComplate === '已完成' ? 'success' : 'danger'">{{
                          scope.row.isComplate
                        }}
                      </el-tag>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-main>
        </el-main>
        <!-- 表格部分end -->

      </el-container>
    </div>
  </ScaleBox>
</template>

<script setup>
// 引入组件，进去页面显示加载
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import { onMounted, reactive, watch, ref } from 'vue'
import { getWmsDnH, getWmsDnD, getWmsDnSummary } from '@/api/mesApi'
import useI18n from '@/hooks/language'
import ScaleBox from 'vue3-scale-box'

const { t } = useI18n()

const data = reactive({
  ready: false,
  letterOfAdvice: '', // 发货通知单号
  delivered: '', // 是否已发货
  options: [
    {
      value: t('wms.hasBeenShipped'),
      label: t('wms.yes')
    },
    {
      value: t('wms.shipmentInOrder'),
      label: t('wms.no')
    }],
  date: [new Date(new Date()).toLocaleDateString() + '', new Date(new Date()).toLocaleDateString() + ''], // 日期
  salesOrder: '', // 销售订单号
  tableData: [], // 主表
  sublist: [], // 子表
  collect: {}, // 数据汇总存储
  currentPage: 1, // 当前页
  pagesize: 20, // 每页显示多少条
  total: 0 // 总的多少数据
})

onMounted(() => {
  data.ready = true
  dataWmsDnSummary()
  setTime()
})
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await dataWmsDnSummary()
  }, 6000)
}
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const timeRefresh = setInterval(() => {
  dataWmsDnSummary()
}, 6000)

// 接口调用
const dataWmsDnSummary = () => {
  // 数据汇总查询
  getWmsDnSummary().then(function (res) {
    data.collect = res
  })
  // 主表查询
  getWmsDnH({
    dnCode: data.letterOfAdvice,
    isComplate: data.delivered,
    salesOrders: data.salesOrder,
    deliveryDate: data.date[0] || '',
    deliveryDate1: data.date[1] || '',
    page: data.currentPage,
    rows: data.pagesize
  }).then(function (res) {
    console.log(res)
    data.tableData = res.rows
    data.total = res.total
  })
}

// 表格点击事件
const rowClick = (row, column, event) => {
  // 点击表格查询后清除定时刷新
  clearInterval(timeRefresh)
  data.sublist = []
  const dnHId = row.id
  getWmsDnD(dnHId).then(function (res) {
    data.sublist = res
  })
}

// 查询
const search = () => {
  // 点击表格查询后清除定时刷新
  clearInterval(timeRefresh)
  // 格式化日期格式
  if (data.date[0] !== undefined && data.date[0].length === undefined) {
    data.date[0] = data.date[0].toLocaleDateString()
    data.date[1] = data.date[1].toLocaleDateString()
  }
  // 调用接口返回表格数据
  dataWmsDnSummary()
}

// 重置
const rest = () => {
  // console.log(111)
  data.letterOfAdvice = ''
  data.delivered = ''
  data.date = ''
  data.salesOrder = ''
  dataWmsDnSummary()
}

// 表格分页相关事件 获取每页显示多少条和当前属于第几页
const handleSizeChange = (val) => {
  data.pagesize = val
}
const handleCurrentChange = (val) => {
  console.log(val)
  data.currentPage = val
  // 调用接口返回表格数据
  dataWmsDnSummary()
}

// 格式化表格内容显示格式
const sfktFormate = (row, index) => {
  if (row.isFs === 1) {
    return '是'
  } else {
    return '否'
  }
}
</script>

<style lang="scss">
@forward "index";
.number-box {
  width: 100px !important;
  text-shadow: 1px 1px 0 #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
